<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus@2.3.6/dist/index.css">
    <script src="https://unpkg.com/element-plus@2.3.6/dist/index.full.js"></script>
</head>

<style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    nav {
        height: 50px;
        background-color: #00c;
        color: #fff;
        font-size: 16px;
        line-height: 50px;
        padding: 0 20px;
    }

    .content {
        width: calc(100% - 200px);
        height: calc(100vh - 50px);
        border: 2px solid #00f;
        position: absolute;
        top: 50px;
        right: 0;
        padding: 20px;
    }
</style>

<body>
    <div id="app">
        <nav>
            <span>后台管理系统</span>
            <span style="float: right;">admin</span>
        </nav>
        <!-- 左侧菜单 -->
        <el-menu style="width: 200px;height: calc(100vh - 50px);" v-model="activeMenu"
            background-color="#009" text-color="#fff" active-text-color="#ff0">
            <el-menu-item index="1">
                <span>用户管理</span>
            </el-menu-item>
            <el-menu-item index="2">
                <span>系统管理</span>
            </el-menu-item>
            <el-menu-item index="3">
                <span>日志管理</span>
            </el-menu-item>
        </el-menu>

        <div class="content">
            <div v-if="activeMenu === '1'">
                <el-card>
                    <template #header>
                        <span>用户管理</span>
                        <el-button type="primary" style="float: right;" @click="addShow=true, form={}">添加用户</el-button>
                    </template>
                    <el-input v-model="searchKeyword" style="width: 300px;">
                        <template #append>
                            <el-button @click="searchUsers">搜索</el-button>
                        </template>
                    </el-input>

                    <el-table :data="currentTableData" style="margin: 20px 0;" border>
                        <el-table-column prop="id" label="id"></el-table-column>
                        <el-table-column prop="name" label="姓名"></el-table-column>
                        <el-table-column prop="email" label="邮箱"></el-table-column>
                        <el-table-column prop="phone" label="电话"></el-table-column>
                        <el-table-column prop="role" label="角色"></el-table-column>
                        <el-table-column prop="status" label="状态">
                            <template #default="scope">
                                <el-tag v-if="scope.row.status === '启用'" type="success">{{scope.row.status}}</el-tag>
                                <el-tag v-else type="danger">{{scope.row.status}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button @click="editShow=true, form={...scope.row}, current=scope.$index" size="small"
                                    type="primary">编辑</el-button>
                                <el-button @click="del(scope.$index)" size="small" type="danger">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <el-pagination :total="tableData.length" :current-page="currentPage" :page-size="pageSize"
                        layout="total, prev, pager, next, jumper" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </el-card>
                <el-dialog v-model="editShow" title="编辑用户" style="width: 500px;">
                    <el-form ref="userForm" :rules="rules" :model="form">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="form.email"></el-input>
                        </el-form-item>
                        <el-form-item label="电话" prop="phone">
                            <el-input v-model="form.phone"></el-input>
                        </el-form-item>
                        <el-form-item label="角色" prop="role">
                            <el-input v-model="form.role"></el-input>
                        </el-form-item>
                        <el-form-item label="状态" prop="status">
                            <el-select v-model="form.status">
                                <el-option label="启用" value="启用"></el-option>
                                <el-option label="禁用" value="禁用"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <el-button @click="editShow=false">取消</el-button>
                        <el-button @click="editUser" type="primary">确定</el-button>
                    </template>
                </el-dialog>
                <el-dialog v-model="addShow" title="添加用户" style="width: 500px;">
                    <el-form ref="addUserForm" :rules="rules" :model="form">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="form.email"></el-input>
                        </el-form-item>
                        <el-form-item label="电话" prop="phone">
                            <el-input v-model="form.phone"></el-input>
                        </el-form-item>
                        <el-form-item label="角色" prop="role">
                            <el-input v-model="form.role"></el-input>
                        </el-form-item>
                        <el-form-item label="状态" prop="status">
                            <el-select v-model="form.status">
                                <el-option label="启用" value="启用"></el-option>
                                <el-option label="禁用" value="禁用"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <el-button @click="addShow=false">取消</el-button>
                        <el-button @click="addUser" type="primary">确定</el-button>
                    </template>
                </el-dialog>
            </div>
            <div v-if="activeMenu === '2'">
                <el-card>
                    <template #header>
                        <span>系统管理</span>
                        <el-button type="primary" style="float: right;" @click="saveSystemConfig">保存设置</el-button>
                    </template>
                    <el-form :model="systemConfig">
                        <el-form-item label="系统名称">
                            <el-input v-model="systemConfig.systemName"></el-input>
                        </el-form-item>
                        <el-form-item label="每页显示数量">
                            <el-input-number v-model="systemConfig.pageSize" :min="1"></el-input-number>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
            <div v-if="activeMenu === '3'">
                <el-card>
                    <template #header>
                        <span>日志管理</span>
                        <el-button type="primary" style="float: right;">导出日志</el-button>
                    </template>
                    <el-input v-model="logSearchKeyword" style="width: 300px;">
                        <template #append>
                            <el-button @click="searchLogs">搜索</el-button>
                        </template>
                    </el-input>
                    <el-table :data="currentLogData" style="margin: 20px 0;" border>
                        <el-table-column prop="id" label="日志ID"></el-table-column>
                        <el-table-column prop="time" label="时间"></el-table-column>
                        <el-table-column prop="action" label="操作"></el-table-column>
                        <el-table-column prop="user" label="用户"></el-table-column>
                    </el-table>
                    <el-pagination :total="filteredLogData.length" :current-page="logCurrentPage" :page-size="logPageSize"
                        layout="total, prev, pager, next, jumper" @size-change="handleLogSizeChange"
                        @current-change="handleLogCurrentChange">
                    </el-pagination>
                </el-card>
            </div>
        </div>
    </div>
    <script>
        const { createApp } = Vue;
        createApp({
            data() {
                return {
                    activeMenu: '1',
                    editShow: false,
                    addShow: false,
                    form: {},
                    current: 0,
                    rules: {
                        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
                        phone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
                        role: [{ required: true, message: '请输入角色', trigger: 'blur' }],
                        status: [{ required: true, message: '请选择状态', trigger: 'change' }]
                    },
                    tableData: [
                        {
                            id: 1,
                            name: '戴林涵',
                            email: '348815641@qq.com',
                            phone: '138088000',
                            role: '管理员',
                            status: '启用'
                        },
                        {
                            id: 2,
                            name: '李达康',
                            email: 'lisi@example.com',
                            phone: '13801388001',
                            role: '管理员',
                            status: '启用'
                        },
                        {
                            id: 3,
                            name: '史蒂夫',
                            email: 'wangwu@example.com',
                            phone: '13801388002',
                            role: '查看者',
                            status: '禁用'
                        },
                        {
                            id: 4,
                            name: '敌法师',
                            email: 'zhaoliu@example.com',
                            phone: '13801388003',
                            role: '编辑',
                            status: '启用'
                        }
                    ],
                    searchKeyword: '',
                    currentPage: 1,
                    pageSize: 10,
                    logData: [
                        { id: 1, time: '2024-01-01 10:00', action: '用户登录', user: '戴林涵' },
                        { id: 2, time: '2024-01-02 11:30', action: '用户添加', user: '李达康' },
                        { id: 3, time: '2024-01-03 14:15', action: '用户删除', user: '史蒂夫' },
                        { id: 4, time: '2024-01-04 16:45', action: '用户修改', user: '敌法师' }
                    ],
                    logSearchKeyword: '',
                    logCurrentPage: 1,
                    logPageSize: 10,
                    systemConfig: {
                        systemName: '后台管理系统',
                        pageSize: 10
                    }
                };
            },
            computed: {
                currentTableData() {
                    const start = (this.currentPage - 1) * this.pageSize;
                    const end = start + this.pageSize;
                    return this.filteredTableData.slice(start, end);
                },
                filteredTableData() {
                    if (!this.searchKeyword) {
                        return this.tableData;
                    }
                    return this.tableData.filter(item => {
                        return Object.values(item).some(value => {
                            if (typeof value === 'string') {
                                return value.includes(this.searchKeyword);
                            }
                            return false;
                        });
                    });
                },
                currentLogData() {
                    const start = (this.logCurrentPage - 1) * this.logPageSize;
                    const end = start + this.logPageSize;
                    return this.filteredLogData.slice(start, end);
                },
                filteredLogData() {
                    if (!this.logSearchKeyword) {
                        return this.logData;
                    }
                    return this.logData.filter(item => {
                        return Object.values(item).some(value => {
                            if (typeof value === 'string') {
                                return value.includes(this.logSearchKeyword);
                            }
                            return false;
                        });
                    });
                }
            },
            methods: {
                del(i) {
                    this.$confirm('确认删除该用户？', '提示', {
                        type: 'warning',
                        confirmButtonText: '确认',
                        cancelButtonText: '取消'
                    }).then(() => {
                        this.tableData.splice(i, 1);
                    });
                },
                editUser() {
                    this.$refs.userForm.validate(res => {
                        if (res) {
                            this.tableData[this.current] = { ...this.form };
                            this.$message.success('修改成功');
                            this.form = {};
                            this.current = 0;
                            this.editShow = false;
                        }
                    });
                },
                addUser() {
                    this.$refs.addUserForm.validate(res => {
                        if (res) {
                            const newId = Math.max(...this.tableData.map(item => item.id)) + 1;
                            this.form.id = newId;
                            this.tableData.push({ ...this.form });
                            this.$message.success('添加成功');
                            this.form = {};
                            this.addShow = false;
                        }
                    });
                },
                searchUsers() {
                    this.currentPage = 1;
                },
                handleSizeChange(newSize) {
                    this.pageSize = newSize;
                },
                handleCurrentChange(newPage) {
                    this.currentPage = newPage;
                },
                searchLogs() {
                    this.logCurrentPage = 1;
                },
                handleLogSizeChange(newSize) {
                    this.logPageSize = newSize;
                },
                handleLogCurrentChange(newPage) {
                    this.logCurrentPage = newPage;
                },
                saveSystemConfig() {
                    this.$message.success('系统设置保存成功');
                }
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>

</html>
    